<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <div id="info"></div>

    <script src="./lib/jquery.js"></script>
    <script src="./lib/template-web.js"></script>
    <!-- 模板的引入 -->
    <script id="tpl-user" type="text/html">
        <div>姓名：{{name}}</div>
        <div>昵称：{{nickName | changeName}}</div>
        <div>年龄：{{age}}</div>
        <div>生日：{{birthday | formaDate}}</div>
        <!-- 为了将new Date后面的值过滤掉 birthday通过|传递给formaDate过滤 -->
        <!-- birthday通过|给formaDate过滤一下再展示出来 -->
        {{if sex===1}}
        <div>性别：男</div>
        {{else if sex===2}}
        <div>性别：女</div>
        {{else}}
        <div>性别：不确定</div>
        {{/if}} {{each hobby}}
        <div>排序：{{$index}} 爱好：{{$value}}</div>
        {{/each}}
        <!-- <div>分数：{{store}}</div> -->
        <!-- 不会解析 -->
        <!-- 插值用法：如果插值显示时添加@ 那么浏览器会解析里面的内容 不加会显示原字符串-->
        <div>分数：{{@store}}</div>
    </script>
    <script>
        var userMsg = {
            name: '王五',
            nickName: 'doudou',
            age: 16,
            sex: 3,
            store: '<h1> 100 </h1>',
            hobby: ['吃饭', '睡觉', '看书', '听歌', '追剧', '烫头'],
            birthday: new Date(),
        };
        // {{value | filter}} 过滤器语法类似管道操作符，它的上一个输出作为下一个输入。
        // template.defaults.imports  官方规定的用法
        // 过滤器函数第一个参数接受目标值。
        template.defaults.imports.formaDate = function(date) {
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            return year + '-' + month + '-' + day;
        };
        template.defaults.imports.changeName = function(str) {
            // 让字符串首字母大写
            // var firstLetter = str[0].toUpperCase();
            // 获取第一个字符并转换成大写
            var firstLetter = str.charAt(0).toUpperCase();
            // 获取除了第一个字符以外的字符串
            var otherLetter = str.substr(1);
            return firstLetter + otherLetter;
        };

        //template('模板id',数据)
        var html = template('tpl-user', userMsg);
        $('#info').html(html);
    </script>
</body>

</html>